<!DOCTYPE html>
<html>

<head>
    <!-- 行高测试5 -->
    <!-- 结论1：行内元素也可以设置行高，即行内框的高度 -->
    <!-- 结论2：同一行，两个span行高不同，整行由最高的元素撑起 -->
    <!-- 结论3：span的高度不等于行内框的高度-->
    <meta charset="utf-8">
    <title>行高测试5</title>
    <style>
        .box {
            border: 1px solid #f99;
            line-height: 36px;
            font-size: 14px;
            /* font-size: 0; */
        }

        .block-box{
            display: inline-block;
            background-color: royalblue;
            height: 36px;
            width: 100px;

        }

        .block{
            display: inline-block;
            background-color: cadetblue;
            line-height: 36px;

            font-size: 12px; /*注意：此处字体调小了*/
        }

        .inline{
            display: inline;
            background-color: rosybrown;
            line-height: 36px;

            font-size: 12px; /*注意：此处字体调小了*/
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="block-box"></div>
    </div>
    
    <div class="box" style="margin-top: 50px;">
        <div class="block">xxx已认证</div>
    </div>

    <div class="box" style="margin-top: 50px;">
        <div class="inline">xxx已认证</div>
    </div>

</body>

</html>